<template>
  <div class="welcome">
    <h2>Welcome</h2>
    <h3>欢迎登录到电商后台管理系统!</h3>
    <!-- 图片资源加载失败 -->
    <img src="123" alt="" @error="(event) => handleError(event)" />
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  methods: {
    handleError (event) {
      console.log('handleError-----', event)
      throw new Error('图片加载失败了') // 手动抛出异常，以便全局事件可以监听到
    }
  }
}
</script>

<style lang="less" scoped>
.welcome {
  margin: 30px auto 0;
  font-size: 20px;
  text-align: center;
  color: pink;
  h3 {
    margin: 50px auto 0;
    font-size: 30px;
  }
  .info {
    margin: 15px 0 10px;
    ul {
      margin: 20px 0 0 150px;
      li {
        margin: 10px 0 50px;
        text-align: left;
        margin: 10px;
        color: black;
        a {
          text-align: center;
          display: inline-block;
          padding: 5px;
          font-size: 18px;
          border: 3px solid pink;
        }
        a:hover {
          color: pink;
          background-color: green;
        }
        span {
          width: 100%;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
